<#include "/common/layout_dl.html">
<@header>
</@header>
<@body>
    <style>
        .inputBg {
            background: #7ff5d1;
        }

        .content {
            background: #ecf0f5;
        }

        .content {
            min-height: 98px;
            padding-left: 15px;
            padding-right: 15px;
            margin-top: 20px;
        }

        .row {
            margin-right: -15px;
            margin-left: -15px;
        }

        @media (min-width: 992px) {

            .col-md-3 {
                width: 25%;
                float: left;
            }

        }

        .info-box {
            display: block;
            min-height: 116px;
            background: #fff;
            width: 100%;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            border-radius: 2px;
            margin-bottom: 15px;
        }

        .bg-aqua {
            background-color: #00c0ef !important;
        }

        i, cite, em, var, address, dfn {
            font-style: italic;
        }

        .info-box-content {
            padding: 5px 10px;
            margin-left: 90px;
        }

        .info-box-text {
            text-transform: uppercase;
        }

        .info-box-text {
            display: block;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .info-box-text {
            text-transform: uppercase;
        }

        .info-box-number {
            display: block;
            font-weight: bold;
            font-size: 18px;
        }

        .info-box small {
            font-size: 14px;
        }

        .bg-red {
            background-color: #dd4b39 !important;
        }

        .bg-green {
            background-color: #00a65a !important;
        }

        .bg-yellow {
            background-color: #f39c12 !important;
        }

        .info-box-icon {
            border-top-left-radius: 2px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 2px;
            display: block;
            float: left;
            height: 90px;
            width: 90px;
            text-align: center;
            font-size: 45px;
            line-height: 90px;
            background: rgba(0, 0, 0, 0.2);
        }

        .jqCron-container {
            margin-left: 37px;
            color: #333;
            font-size: 14px;
        }

        .layui-layer-title {
            margin-bottom: 20px;
            font-size: 20px;
        }

        .layui-table-tool {
            position: relative;
            width: 100%;
            padding: 10px;
            border-width: 1px 0 0;
            height: 44px;
            font-size: 12px;
            white-space: nowrap;

            /*margin-top: -43px;*/
        }

        h2 {
            padding: 18px;
            font-size: 16px;
            background: #fff;
            font-weight: bold;
        }

        .btns {
            background-color: none !important;
        }

        .form-horizontal .form-group {
            margin-right: -15px;
            margin-left: -15px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        @media (min-width: 768px) {
            .form-horizontal .control-label {
                padding-top: 7px;
                margin-bottom: 0;
                text-align: right;
            }
        }

        @media (min-width: 768px) {
            .col-sm-2 {
                width: 8.666667%;
            }

        }

        @media (min-width: 768px) {
            .col-sm-2 {
                float: left;
                position: relative;
                min-height: 1px;
                padding-right: 15px;
                padding-left: 15px;
            }
        }

        @media (min-width: 768px) {
            .col-sm-10 {
                width: 83.33333333%;
            }
        }

        @media (min-width: 768px) {
            .col-sm-10 {
                float: left;
                position: relative;
                min-height: 1px;
                padding-right: 15px;
                padding-left: 15px;
            }
        }

        .nice-validator input {
            display: inline-block;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .select2-hidden-accessible {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
        }

        .form-control {
            border-radius: 0;
            box-shadow: none;
            border-color: #d2d6de;
        }

        .form-control {
            width: 100%;
            height: 34px;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
        }

        .box-body {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
            padding: 10px;
        }

        input {
            font-family: inherit;
            font-style: inherit;
            font-weight: inherit;
            outline: 0;
        }

        .form-horizontal .control-label {
            padding-top: 7px;
            margin-bottom: 0;
            text-align: right;
        }

        .form-control {
            width: 88%;
        }

        .tijiao {
            margin-top: -4%;
            margin-left: 24%;

        }

        .layui-layer-btn-c {
            margin-top: 15%;
        }

        .an {

            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            touch-action: manipulation;
            cursor: pointer;
            border: none;
            border: 1px solid transparent;

            margin-top: 20%;
            margin-left: 8%;
        }

        .ps {
            margin-left: 32%;
            background-color: #00a65a;
            color: #fff;
        }

        .qu {
            border-color: #ddd;
            background-color: #f4f4f4;
            color: #444;
        }

        .laytable-cell-1-3 {
            width: 184px;
        }
    </style>
<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this">作业调度监控</li>

    </ul>
    <section class="content">
        <!-- Info boxes -->
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">INSTANCES</span>
                        <span id="schedulerInstances" class="info-box-number"></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-green"><i class="fa fa-google-plus"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">JOBS</span>
                        <span id="jobs" class="info-box-number"></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->

            <!-- fix for small devices only -->
            <div class="clearfix visible-sm-block"></div>

            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-red"><i class="ion ion-ios-cart-outline"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">PAUSE</span>
                        <span id="pauseJobs" class="info-box-number"></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">ACTIVITY</span>
                        <span id="activityJobs" class="info-box-number"></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
</div>
<h2>当前任务列表 &nbsp;&nbsp;&nbsp;&nbsp;

    <span class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">

  <button data-method="notice" class="layui-btn-small add layui-btn" style="background: #ba2b26"><i class="layui-icon">&#xe608;</i> 添加</button>

</span>


</h2>

<!--表格容器  lay-filter 过滤器   lay-event  监听时间用 -->
<table class="layui-hide" id="task" lay-filter="schedulerTable"></table>
</@body>
<@footer>
</@footer>
<!--操作自定义模板-->
<script type="text/html" id="barDemo">

    <div class="layui-btn-group">
        <button class="layui-btn layui-btn  layui-btn-mini" lay-event="switchOn">启动</button>
        <button class="layui-btn layui-btn-warm layui-btn-mini" lay-event="switchPause">暂停</button>
        <button class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</button>
    </div>


</script>
<!--cron表达式渲染-->
<script type="text/html" id="cron">


    <div type="text" style="height: inherit;width: 60%" name="title" lay-verify="title" autocomplete="off"
         class="layui-input-inline aa">
        <input type="text" style="width: 90%;height: 90%" value="{{d.cron}}" required lay-verify="required"
               placeholder="请输入标题" autocomplete="off" class="layui-input inputBg" disabled>
    </div>
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-danger layui-btn-mini" lay-event="updateCron">编辑</button>
        <button class="layui-btn layui-btn-normal layui-btn-mini" lay-event="resetCron">重置</button>
        <button class="layui-btn layui-btn layui-btn-mini" lay-event="submitCron">提交</button>
    </div>
</script>

<script>
    $(function () {
        setInterval(schedulerInstance, 15000)

    });

    function schedulerInstance() {

        $.ajax({
            url: '${base}/system/quartz/currentSchedulerInstances',
            type: 'POST',
            contentType: 'application/json;charset=UTF-8',
            success: function (result) {

                $("#schedulerInstances").html(result.length)
            }
        });

        $.ajax({
            url: '${base}/system/quartz/allJobs',
            type: 'POST',
            contentType: 'application/json;charset=UTF-8',
            success: function (result) {
                var total = result.data.length;
                $('#jobs').html(total);
            }
        });


    }

    <!--添加弹出层开始-->
    layui.use('layer', function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        //触发事件
        var active = {

            setTop: function () {
                var that = this;
                //多窗口模式，层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '当你选择该窗体时，即会在最顶端'
                    , area: ['390px', '1400px']
                    , shade: 0
                    , maxmin: true
                    , offset: [ //为了演示，随机坐标
                        Math.random() * ($(window).height() - 300)
                        , Math.random() * ($(window).width() - 390)
                    ]
                    , content: 'http://layer.layui.com/test/settop.html'
                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            }
            , notice: function () {
                //示范一个公告层
                layer.open({
                    type: 1
                    , title: false //不显示标题栏
                    , closeBtn: false
                    , area: '1000px;'
                    , shade: 0.8
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    , btn: ['提交', '取消']
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: '<div><div class="box-body">\n' +
                    '\t\t  <div class="layui-layer-title" style="cursor: move;">新增任务</div> \n' +
                    '\t\t    <div class="form-group">\n' +
                    '\t\t       <div class="form-group">\n' +
                    '\t\t         <label for="uname" class="col-sm-2 control-label">任务名称：</label>\n' +
                    '\t\t        \t<input type="text" name="categoryNameEn" class="form-control" value=""  id="Taskname" placeholder="请输入编码eg:name"  lay-verify="required">\n' +
                    '\t\t       </div>\n' +
                    '\t\t         <label for="uname" class="col-sm-2 control-label">任务组&nbsp;：</label>\n' +
                    '\t\t        \t<input type="text" name="categoryNameChs" class="form-control" value="" id="Taskgroup" placeholder="请输入分类名eg:学历" lay-verify="required">\n' +
                    '\t\t       </div>\n' +
                    '\t\t       <div class="form-group">\n' +
                    '\t\t         <label for="uname" class="col-sm-2 control-label">任务描述：</label>\n' +
                    '\t\t        \t<input type="text" name="categoryNameEn" class="form-control" id="Taskdescription" value="" placeholder="请输入编码eg:name"  lay-verify="required">\n' +
                    '\t\t       </div>\n' +
                    '\t\t       <div class="form-group">\n' +
                    '\t\t         <label for="uname" class="col-sm-2 control-label">触发器&nbsp;:</label>\n' +
                    '\t\t        \t<input type="text" name="remark" class="form-control" id="trigger" value="" placeholder="请输入备注信息">\n' +
                    '\t\t       </div>\n' +
                    '\t\t       <div class="form-group">\n' +
                    '\t\t         <label for="uname" class="col-sm-2 control-label">触发器组:</label>\n' +
                    '\t\t        \t<input type="text" name="remark" class="form-control" id="Triggergroup" value="" placeholder="请输入备注信息">\n' +
                    '\t\t       </div>\n' +
                    '\t\t       <div class="form-group">\n' +
                    '\t\t         <label for="uname" class="col-sm-2 control-label">执行类:</label>\n' +
                    '\t\t        \t<input type="text" name="remark" class="form-control" id="Executionclass" value="" placeholder="请输入备注信息">\n' +
                    '\t\t       </div>\n' +

                    '\t\t     <label for="uname" class="col-sm-2 control-label">cron表达式:</label>\n' +
                    '\t\t   <input class="example3" value=""  id="cronexpress"/> \n' +
                    ' </div>'

                    , success: function (layero) {

                        function chkinput(form) {
                            if (form.username.value == "")//通过if语句判断用户名是否为空
                            {
                                alert("请输入用户名!");//如果为空弹出提示消息
                                form.username.focus();//返回指定位置
                                return false;
                            }
                            if (form.password.value == "")//通过if语句判断密码是否为空
                            {
                                alert("请输入密码！");//如果为空弹出提示消息
                                form.password.focus();//返回指定位置
                                return false;
                            }
                            return true;
                        }


                        var btn = layero.find('.layui-layer-btn');
                        var aa = btn.find('.layui-layer-btn0');
                        aa.click(function () {
                            var jobName = $('#Taskname').val();
                            var jobGroupName = $('#Taskgroup').val();
                            var description = $('#Taskdescription').val();
                            var triggerName = $('#trigger').val();
                            var triggerGroupName = $("#Triggergroup").val();
                            var jobClassName = $("#Executionclass").val();
                            var cron = $("#cronexpress").val();

                            var params = {
                                jobName: jobName,
                                jobGroupName: jobGroupName,
                                description: description,
                                triggerName: triggerName,
                                triggerGroupName: triggerGroupName,
                                jobClassName: jobClassName,
                                cron: cron
                            };


                            var url = '${base}/system/quartz/add';
                            $.ajax({
                                url: url,
                                type: 'POST',
                                contentType: 'application/json;charset=UTF-8',
                                data: JSON.stringify(params),
                                success: function (result) {
                                    layer.msg(result.msg);
                                    var table = layui.table;

                                    table.reload('testReload', {
                                        where: {}
                                    });
                                }
                            });

                        })
                    }
                });
            }
            , offset: function (othis) {
                var type = othis.data('type')
                    , text = othis.text();

                layer.open({
                    type: 1
                    , offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    , id: 'layerDemo' + type //防止重复弹出
                    , content: '<div style="padding: 20px 100px;">' + text + '</div>'
                    , btn: '关闭全部'
                    , btnAlign: 'c' //按钮居中
                    , shade: 0 //不显示遮罩
                    , yes: function () {
                        layer.closeAll();
                    }
                });
            }
        };

        $('#layerDemo .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });
</script>

<!--结束-->
<script>


    //    layui 相关
    layui.use(['table'], function () {
        var table = layui.table;

        //方法级渲染
        table.render({
            even: true,
            elem: '#task'
            , url: '${base}/system/quartz/allJobs'
            , cols: [[
                {field: 'jobName', title: '任务名称', width: 126,fixed: true},
                {field: 'jobGroupName', title: '任务组', width: 212},
                {field: 'description', title: '任务描述', width: 229},
                {title: 'cron表达式', width: 280, edit: true, toolbar: '#cron'},
                {field: 'triggerName', title: '触发器', width: 206},
                {field: 'triggerGroupName', title: '触发器组', width: 247},
                {field: 'status', title: '任务状态', width: 96},
                {field: 'jobClassName', title: '执行类', width: 267},
                {field: 'previousTime', title: '上次执行时间', width: 164},
                {field: 'nextTime', title: '下次执行时间', width: 168},
                {title: '操作', width: 155, toolbar: '#barDemo'}
            ]]
            , id: 'testReload'
            , page: true
            , height: 315
        });


        /**
         * 先监听 schedulerTable   所有工具栏
         */
        table.on(['tool(schedulerTable)'], function (obj) {
            var $this = $(this);
            var cronElement = $($this.parent().prev().children('input').get(0));
            var cronElementVal = cronElement.attr('value');
            var lineData = obj.data; //获得当前行数据
            var layEvent = obj.event;


            //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    lineData.previousTime = null;
                    lineData.nextTime = null;
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);

                    $.ajax({
                        url: '${base}/system/quartz/remove',
                        type: 'POST',
                        contentType: 'application/json;charset=UTF-8',
                        data: JSON.stringify(lineData),
                        success: function (result) {
                            layer.msg(result.msg);
                        }

                    })
                });
            }
//            更新 cron表达式
            if (layEvent === 'updateCron') {
                removeClass(cronElement, "inputBg");
                removeAttr(cronElement, 'disabled');
            }
//            重置cron
            if (layEvent === 'resetCron') {
                addClass(cronElement, "inputBg");
                cronElement.val(cronElementVal);
                addAttr(cronElement, 'disabled', 'disabled');
            }
//            提交cron
            if (layEvent === 'submitCron') {
                layer.confirm('确定更改cron?', function (index) {
                    lineData.cron = cronElement.val();
                    lineData.previousTime = null;
                    lineData.nextTime = null;
                    layer.close(index);
                    //向服务端发送修改指令
                    $.ajax({
                        url: '${base}/system/quartz/modifyCron',
                        type: 'POST',
                        contentType: 'application/json;charset=UTF-8',
                        data: JSON.stringify(lineData),
                        success: function (result) {
                            layer.msg(result.msg);
                        }

                    })
                }, function () {
                    cronElement.val(cronElementVal);
                });
                addClass(cronElement, "inputBg");
                addAttr(cronElement, 'disabled', 'disabled');
            }

            if (layEvent === 'switchOn') {
                lineData.previousTime = null;
                lineData.nextTime = null;

                $.ajax({
                    url: '${base}/system/quartz/resume',
                    type: 'POST',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(lineData),
                    success: function (result) {
                        layer.msg(result.msg);
                    }

                });

            }
            if (layEvent === 'switchPause') {
                lineData.previousTime = null;
                lineData.nextTime = null;
                var url = '${base}/system/quartz/pause';
                $.ajax({
                    url: url,
                    type: 'POST',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(lineData),
                    success: function (result) {
                        layer.msg(result.msg);
                    }

                });
            }
        });
        var $ = layui.$, active = {
            reload: function () {


                table.reload('testReload', {
                    where: {}
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        layui.use('element', function () {
            var element = layui.element;

            //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
            var layid = location.hash.replace(/^#test1=/, '');
            element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项

            //监听Tab切换，以改变地址hash值
            element.on('tab(test1)', function () {
                location.hash = 'test1=' + this.getAttribute('lay-id');
            });
        });

    });

    //      移除 元素 属性
    function removeAttr(element, attr) {
        element.removeAttr(attr);
    }

    //      添加 元素 属性
    function addAttr(element, attr, attrVal) {
        element.attr(attr, attrVal);
    }

    //    移除元素 class
    function removeClass(element, className) {
        element.removeClass(className);
    }//    移除元素 class
    function addClass(element, className) {
        element.addClass(className);
    }
</script>
